<template>
  <div class="bg" :style="styleHeight">

    <div style="margin: 20px;" >
      <el-form :inline="true"  ref="ban" size="small" style="height:51px;overflow:hidden;">
        <el-form-item label="标题关键字">
          <el-input placeholder="请输入标题关键字" v-model="postsQueryParam.title"></el-input>
        </el-form-item>
        <el-form-item label="内容关键字">
          <el-input placeholder="请输入标题关键字" v-model="postsQueryParam.content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
          <el-button type="info" icon="el-icon-refresh-left" @click="onReset">重置</el-button>
          <el-button type="success" icon="el-icon-plus" @click="addMenu(-1)">新增帖子</el-button>
        </el-form-item>
      </el-form>
      <el-table
          :border="true"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :default-sort = "{}">
        <el-table-column
            prop="title"
            label="标题"
            width="180">
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.imgUrl"
                ></el-image>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true"
            prop="content"
            label="内容"
            width="800"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="success "
                @click="addMenu(scope.row.id)">编辑</el-button>

            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="postsQueryParam.pageNumber"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="postsQueryParam.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="PageInfo.total"
            :background="true"
          >
        </el-pagination>
      </div>

    </div>
    <el-dialog
        :before-close="handleClose"
        title="帖子管理"
        :visible.sync="dialogVisible"
        width="50%"
    >
      <el-form :label-position="labelPosition" label-width="80px" :model="form" style="width: 500px;">
        <el-form-item label="标题">
          <el-input  v-model="posts.title"></el-input>
        </el-form-item>
        <el-form-item label="封面图片">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8001/uploadImg"
              :show-file-list="true"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imgUrl" :src="posts.imgUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="帖子内容">
          <el-input :rows="12"  class="texts" type="textarea"  v-model="posts.content"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false, handleClose" >取 消</el-button>
          <el-button type="primary" @click="updateAndSavePosts">确 定</el-button>
        </span>

    </el-dialog>
  </div>
</template>

<script>
import {deletPostsById,savePosts, getPosts ,getPageByParam} from '@/api/posts/index'
import { getSession } from "@/utils/storage";
import "mavon-editor/dist/css/index.css";
import {deletUserById} from "@/api/user";
export default {
  name: "editor",
  data() {
    return {
      postsQueryParam:{fid:'', pageNumber:1,
        pageSize:10,},
      PageInfo: {
        total:0,
      },imgUrl:'',
      posts:{},
      tableData: [],
      labelPosition: 'right',
      form: {
        name: '',
        region: '',
        type: ''
      },
      imageUrl:'',
      serverAddress:'http://localhost:8001/uploadImg',
      dialogVisible:false,
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',

    };
  },
  mounted() {
    this.createQueryParam();
    this.getList(this.postsQueryParam);
  },
  methods: {
    //获取当前用户id
    createQueryParam(){

      this.postsQueryParam.fid = getSession('userInfo').finstructor.id;
    },
    // 打开链接
    open() {
      window.open(this.link);
    },
    addMenu(value){
      if (value==-1){
        //新增帖子
        this.posts={};
        this.posts.fid=getSession('userInfo').finstructor.id
      }else {
        //查询该帖子下的详细信息
       this.getPostsById(value);

      }
      this.dialogVisible= true;
    },

    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return  isLt2M;
    },
    //分页控件的方法
    handleSizeChange(val) {
      this.postsQueryParam.pageSize=val;
      this.getList(this.postsQueryParam);
    },
    handleCurrentChange(val) {
      this.postsQueryParam.pageNumber=val;
      this.getList(this.postsQueryParam);
    },
    getList(value){
      getPageByParam(value).then(res=>{
        this.tableData = res.data.records;
        this.PageInfo.total = res.data.total;
      }).catch()
    },
    getPostsById(value){
       getPosts(value).then(res=>{
        this.posts=res.data;
        this.imgUrl=res.data.imgUrl;
      }).catch()
    },
    onSearch(){
      this.getList(this.postsQueryParam);
    },
    onReset(){
      this.postsQueryParam.title='';
      this.postsQueryParam.content='';
    },
    handleClose(done){
      this.posts={}
      done();
    },
    handleAvatarSuccess(res, file) {
      this.imgUrl = URL.createObjectURL(file.raw);
      this.posts.imgUrl = res.data;
    },
    updateAndSavePosts(){
      savePosts(this.posts).then(res=>{
        if (!res.code===200){
          this.$message.error("操作失败");
        }
        this.$message.success('成功！');
        this.dialogVisible= false;
        this.getList(this.postsQueryParam);
      }).catch()
    },
    handleDelete(value){
      this.$confirm('确认删除这条数据？', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletPostsById(value).then(res=>{
          if (res.code===200){
            this.getList(this.postsQueryParam);
          }
        }).catch(res=>{

        })
        this.$message.success('删除成功！')
      }).catch(() => { })
    }
  },
  watch: {
    dialogVisible(newValue, oldValue) {
      if (!newValue){

      }
    }
  },
  computed: {
    // 动态高度，适配各布局。单页面的画，高度设为100%即可。
    styleHeight() {
      let { layout, isTagsView } = this.$store.state.layoutConfig;
      if (layout === 'fashion' || layout === 'strange') {
        if (isTagsView) {
          return {
            height: `calc(100vh - 84px)`
          }
        } else {
          return {
            height: `calc(100vh - 50px)`
          }
        }
      } else {
        return {
          height: `calc(100vh - 50px)`
        }
      }
    }
  },
};
</script>
<style>
.bg {
  border-radius: 0px;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  padding: 15px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03) !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.texts {
  width: 700px !important;
}
.page {
  margin-top: 20px;
  text-align: center;
}
</style>